import React, { Component } from 'react';
import { NavBar, Carousel, Flex } from 'antd-mobile';
import style from './Index.module.scss'
import SearchInput from './searchinput/SearchInput'
import axios from '../../utils/fecth'
import { withRouter } from 'react-router-dom'
class Index extends Component {

    // 首页轮播
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
        swiper_list: [],
        navitems: [],
        productData: [],
    }

    //   轮播图点极事件
    handleSwiperClick = (goods_id) => {
        this.props.history.push("/goodDetail/" + goods_id);
    }
    // 导航图片点击
    handleCatItemClick = (params) => {
        this.props.history.push("/category");
    }
    //图片列表点击事件
    handleImgClick = (pargrams) => {
        console.log(this);
        console.log(this.state.productData)
        this.props.history.push("/goodList?query="+pargrams);
    }





    // 首页轮播


    // eslint-disable-next-line no-dupe-class-members
    componentDidMount() {//首页轮播数据
        axios.get('/home/swiperdata').then(res => {
            console.log(res);
            this.setState({
                swiper_list: res,
            })

        })
        // 首页导航数据
        axios.get('/home/catitems').then(res => {
            console.log(res);
            this.setState({
                navitems: res,
            })
            console.log(this.state)
        })
        //首页图片列表
        axios.get('/home/floordata').then(res => {
            console.log(res);
            this.setState({
                productData: res,
            })

        })
    }
    render() {
        return (
            <div className={style.ygIndex}>
                <div className={style.ygIndexNav}>
                    <NavBar className={style.indexNav}
                        style={{ backgroundColor: 'var(--themeColor)' }}
                    // mode="light"
                    // icon={<Icon type="left" />}
                    // onLeftClick={() => console.log('onLeftClick')}
                    // rightContent={[
                    //     <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                    //     <Icon key="1" type="ellipsis" />,
                    // ]}
                    >优购商城</NavBar>
                </div>
                {/* 首页search start*/}
                <div className={style.ygIndexSearch}>
                    <SearchInput></SearchInput>
                </div>
                {/* 首页search end*/}

                {/* 首页轮播图 start */}
                <div className={style.ygIndexContent}>
                <div className={style.ygIndexSwiper}>


                    <Carousel
                        autoplay={false}
                        infinite

                    >
                        {this.state.swiper_list.map(val => (

                            // eslint-disable-next-line jsx-a11y/anchor-is-valid
                            <div
                                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                                key={val.goods_id}

                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>


                </div>
                {/* 首页轮播图 end */}
                <div className={style.ygIndexNavItems}>
                    <div className={style.navItemsItem}>
                        <Flex>
                            {/* <Flex.Item><PlaceHolder /></Flex.Item>
                            <Flex.Item><PlaceHolder /></Flex.Item> */}
                            {this.state.navitems.map(v => {
                                return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                                    <img src={v.image_src} alt="" />
                                </Flex.Item>
                            })}

                        </Flex>
                    </div>
                </div>
                {/* 首页图片列表开始 */}
                <div className={style.ygIndexProductData}>
                    {
                        this.state.productData.map(v => {
                            return <div key={v.floor_title.image_src} className={style.productDataItem}>
                                {/* 标题开始 */}
                                <div className={style.productTitle}>
                                    <img src={v.floor_title.image_src} alt="" />
                                </div>
                                {/* 标题结束 */}
                                {/* 图片列表的开始 */}
                                <div className={style.productImageList}>
                                    {
                                        v.product_list.map(vv => {
                                            return <div className={style.imageListItem} key={vv.image_src} onClick={this.handleImgClick.bind(this, vv.name)}>
                                                <img src={vv.image_src} alt="" />
                                            </div>
                                        })
                                    }
                                </div>
                                {/* 图片列表的结束 */}
                            </div>
                        })
                    }
                </div>
                {/* 首页图片列表结束 */}
                </div>
            </div>
        );
    }
}

export default withRouter(Index);
